iT邦幫忙

2021 iThome 鐵人賽

DAY 22
1
Modern Web

連線網頁卡牌遊戲(Elixir, Phoenix, Liveview)系列 第 22

22 準備完成後跳轉到遊戲頁面

  • 分享至 

  • xImage
  •  

兩個人都準備好的時候,要轉到遊戲畫面

我來把準備畫面跟遊戲分開好了
這樣比較不會什麼都塞在同一個 liveview

先來改 router 部分

live "/:id/host", GameLive.Invite, :host
live "/:id/guest", GameLive.Invite, :guest

我把原本的邀請畫面的路徑多加一個 /invite

live "/:id/host/invite", GameLive.Invite, :host
live "/:id/guest/invite", GameLive.Invite, :guest
live "/:id/host", GameLive.Game, :host
live "/:id/guest", GameLive.Game, :guest

當他們都按下確認後就跳到 Game 這個 liveview
我們來多加一個條件到 handle_info

def handle_info(
      %{host_ready: true, guest_ready: true} = room,
      %{assigns: %{player: player}} = socket
    ) do
  socket =
    socket
    |> assign(:room, room)
    |> then(&push_redirect(&1, to: Routes.game_game_path(&1, player, room.id)))

  {:noreply, socket}
end

def handle_info(room, socket) do
  {:noreply, assign(socket, :room, room)}
end

如果 room 裡面雙方都準備好的話
就會對到第一個 handle_info ,幫他們用 push_redirect 來轉到新的地方

Game live

先建立一個空白的頁面確定他們準備好之後都過的來

新增 lib/card_web/live/game_live/game.ex

defmodule CardWeb.GameLive.Game do
  use CardWeb, :live_view
  import CardWeb.Component

  def render(assigns) do
    ~H"""
    <div class="flex flex-col items-center h-screen">
      <.logo />
    </div>
    """
  end
end

現在應該雙方準備好之後都會到這個只有 logo 的頁面了
明天來把他跟遊戲串起來


上一篇
21 "準備完成" 用 PubSub 同步更新網頁
下一篇
23 搞半天終於在網頁上啟動遊戲了
系列文
連線網頁卡牌遊戲(Elixir, Phoenix, Liveview)32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言